<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
    <title>充值觅豆</title>
    <link rel="stylesheet" type="text/css" href="assets/iconfont.css">
    <style type="text/css" rel="stylesheet">
        * {
            moz-user-select: -moz-none;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            -khtml-user-select: none;
            user-select: none;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            background-color: #eee
        }

        html {
            font-size: 62.5%
        }

        body {
            font-size: 1.4rem;
            font-family: "Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif
        }

        /** 清除内外边距 **/
        body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
        dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
        pre, /* text formatting elements 文本格式元素 */
        form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
        th, td /* table elements 表格元素 */
        {
            margin: 0;
            padding: 0;
        }

        p {
            font-size: 1.4rem;
            padding: 0.6rem 1.4rem;
        }

        .currency-group {
            display: flex;
            align-items: center;
            background-color: #fff;
        }

        .currency-item {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.8rem 0;
            border-right: 1px solid #E9E9E9;
        }

        .currency-item:active {
            background-color: #E9E9E9;
        }

        .currency-item i {
            font-size: 2rem;
            margin-right: 0.4rem;
            color: #4CD472;
        }

        .trade-group {
            background-color: #fff;
        }

        .trade-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 2rem;
            border-bottom: 1px solid #E9E9E9;
            padding: 0.8rem 1.4rem;
        }

        .trade-item i {
            font-size: 2.4rem;
            color: #4CD472;
        }

        .trade-item:active {
            background-color: #E9E9E9;
        }

        .pay {

        }

        .pay-group {
            background-color: #fff;
        }

        .pay-item {
            display: flex;
            padding: 0.8rem 1.4rem;
        }

        .pay-item:active {
            background-color: #E9E9E9;
        }

        .pay-item img {
            height: 4rem;
            width: 4rem;
        }

        .pay-item i {
            line-height: 4rem;
            font-size: 2.4rem;
            color: #4CD472;
        }

        .pay-type {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;
            margin-left: 0.8rem;
        }

        .pay-type .title {
            font-size: 1.6rem;
        }

        .pay-type .description {
            font-size: 1rem;
        }

        .total {
            display: flex;
            justify-content: space-between;
            height: 4rem;
            align-items: center;
            padding: 0.8rem 1.4rem;
            background-color: #fff;
            margin-top: 0.6rem;
        }

        .amount {
            font-size: 1.8rem;
            color: #4CD472;
        }

        .pay-btn {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 4rem;
            justify-content: center;
            align-items: center;
            background-color: #4CD472;
            text-align: center;
            line-height: 4rem;
            color: #fff;
        }

        .pay-btn:active {
            background-color: #0BB20C;
        }
    </style>
</head>
<body>
<div class="currency">
    <p>请选择货币类型</p>
    <div class="currency-group">
        <a class="currency-item">
            <i class="iconfont icon-yuanxingweixuanzhong"></i>
            <span>美元($)</span>
        </a>
        <a class="currency-item">
            <i class="iconfont icon-yuanxingxuanzhongfill"></i>
            <span>人民币(&yen;)</span>
        </a>
    </div>
</div>
<div class="trade">
    <p>请选择交易类型</p>
    <div class="trade-group">
        <a class="trade-item">
            <span>5元购买<span>50</span>觅豆</span>
            <i class="iconfont icon-yuanxingweixuanzhong"></i>
        </a>
        <a class="trade-item">
            <span>5元购买50觅豆</span>
            <i class="iconfont icon-yuanxingweixuanzhong"></i>
        </a>
        <a class="trade-item">
            <span>5元购买50觅豆</span>
            <i class="iconfont icon-yuanxingweixuanzhong"></i>
        </a>
        <a class="trade-item">
            <span>5元购买50觅豆</span>
            <i class="iconfont icon-yuanxingweixuanzhong"></i>
        </a>
        <a class="trade-item">
            <span>5元购买50觅豆</span>
            <i class="iconfont icon-yuanxingxuanzhongfill"></i>
        </a>
    </div>
</div>
<div class="pay">
    <p>请选择支付类型</p>
    <div class="pay-group">
        <a class="pay-item">
            <img src="assets/alipaylogo.png" alt="支付宝">
            <div class="pay-type">
                <span class="title">支付宝</span>
                <span class="description">数亿用户都在用,安全可托付</span>
            </div>
            <i class="iconfont icon-yuanxingxuanzhongfill"></i>
        </a>
    </div>
</div>
<div class="total">
    <span>支付总计</span>
    <div class="money">
        <span>&yen;</span>
        <span class="amount">50</span>
    </div>
</div>
<a class="pay-btn" onclick="pay()">
    立即支付
</a>
<script type="text/javascript">
  var globalTmp = {};
  window.onresize = function () {
    var e = 320,
      t = document.documentElement.clientWidth;
    document.getElementsByTagName("html")[0].style.fontSize = t / e * 62.5 + "%";
  };
  window.onresize();
  document.body.addEventListener("touchmove",
    function (e) {
      e.preventDefault()
    });
  function loadXMLDoc() {
    var xmlhttp;
    if (window.XMLHttpRequest) {
      //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
      xmlhttp = new XMLHttpRequest();
    } else {
      console.error('您的浏览器不支持');
    }
    xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        console.log(JSON.parse(xmlhttp.responseText));
        initHtml(JSON.parse(xmlhttp.responseText));
      }
    };
    xmlhttp.open("POST", "http://nrb-stage.azurewebsites.net/mobile/recharge", true);
    xmlhttp.send();
  }

  loadXMLDoc();

  function initHtml(data) {
    initCurrentTypeHtml(data);
    initTradeType(data);
  }

  function initCurrentTypeHtml(data) {
    var initTarget = document.getElementsByClassName('currency-group');
//    console.log(initTarget);
    var tagCurrency = '';
    var arr = JSON.stringify(data).replace(/"/g, '*').replace(/:/g, '&');
//    console.log(arr);

    for (var i = 0; i < data.length; i++) {
      tagCurrency += '<a class="currency-item" id="CurrencyType_' + data[i].CurrencyType + '" onclick="chooseCurrencyType(event)" data-value="' + data[i].CurrencyType + '" data-index="' + i + '" data-arr="' + arr + '"><i class="iconfont icon-yuanxingweixuanzhong"></i><span>' + data[i].TypeName + '</span></a>';
      initTarget[0].innerHTML = tagCurrency;
    }

    document.getElementById('CurrencyType_' + data[0].CurrencyType).click();
    globalTmp.currencyType = data[0].CurrencyType;
  }

  function chooseCurrencyType(e) {
    var tagA = e.target.nodeName === 'A' ? e.target : e.target.parentElement;
    var id = e.target.nodeName === 'A' ? e.target.id : e.target.parentElement.id;
//    console.log(id);

    for (var i = 0; i < tagA.parentElement.children.length; i++) {
      tagA.parentElement.children[i].children[0].className = 'iconfont icon-yuanxingweixuanzhong';
    }
    tagA.children[0].className = 'iconfont icon-yuanxingxuanzhongfill';
    globalTmp.currencyType = tagA.getAttribute('data-value');
    globalTmp.currencyIndex = parseInt(tagA.getAttribute('data-index'));
//    console.log(tagA.getAttribute('data-arr'));
    var arr = tagA.getAttribute('data-arr').replace(/\*/g, '"').replace(/&/g, ':');
//    console.log(arr);
    initTradeType(JSON.parse(arr));
  }

  function initTradeType(data) {
    var initTarget = document.getElementsByClassName('trade-group');
//    console.log(initTarget);
    var tagTrade = '';
    var repeatArr = data[globalTmp.currencyIndex].List;
    for (var i = 0; i < repeatArr.length; i++) {
      tagTrade += '<a class="trade-item" id="TradeType_' + repeatArr[i].Id + '" onclick="chooseTradeType(event)" data-value="' + repeatArr[i].RateAmount + '" data-index="' + i + '" data-payAmount="' + repeatArr[i].Amount + '"><span>' + repeatArr[i].Amount + '元购买<span>' + repeatArr[i].RateAmount + '</span>觅豆</span><i class="iconfont icon-yuanxingweixuanzhong"></i></a>';
      initTarget[0].innerHTML = tagTrade;
    }
    document.getElementById('TradeType_' + repeatArr[0].Id).click();
  }

  function chooseTradeType(e) {
    var tagA = e.target.nodeName === 'A' ? e.target : e.target.parentElement;
//    console.log(e);
    for (var i = 0; i < tagA.parentElement.children.length; i++) {
      tagA.parentElement.children[i].children[1].className = 'iconfont icon-yuanxingweixuanzhong';
    }
    tagA.children[1].className = 'iconfont icon-yuanxingxuanzhongfill';
    globalTmp.tradeType = tagA.getAttribute('data-value');
    globalTmp.tradeIndex = parseInt(tagA.getAttribute('data-index'));
    globalTmp.tradePayAmount = parseFloat(tagA.getAttribute('data-payAmount'));
    initTotal();
  }

  function pay() {
    console.log(globalTmp);
  }

  function initTotal() {
    var tag = document.getElementsByClassName('amount')[0];
    tag.innerHTML = globalTmp.tradePayAmount;
  }

</script>
</body>
</html>